<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  // 基于js的事件冒泡 可以以js事件委托的方式 在父元素上 给父元素的子元素绑定事件 同时减少事件绑定的时间复杂度
  <ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    // 1.传统的事件监听 我们需要在ul的子元素上绑定事件 这里有一个for循环 循环遍历每一个li 在每一个li上绑定事件 改li上事件功能很简单 就是点击li时 切换背景颜色
    // window.onload = function () {
    //   var myUl = document.getElementById('ul')
    //   var list = myUl.getElementsByTagName('li')
    //   for (var i = 0; i < list.length; i++) {
    //     list[i].addEventListener('click', function () {
    //       this.style.backgroundColor = 'black'
    //     })
    //   }
    // }

    // 2.通过事件委托实现事件监听 下面代码中 我们并没有直接在li上绑定事件 而是在li的父元素ul上 绑定了事件 因为ul上的事件 是通过事件冒泡 由li传递到ul 事件的冒泡顺序为 li=>ul 因此 这里的ul点击事件的ev.target指向的是uld的子元素li 这样我们就能简洁的在通过ul上绑定事件 不需要遍历li 就能通过事件冒泡机制 在li上绑定事件
    window.onload = function () {
      var myUl = document.getElementById('ul')
      myUl.addEventListener('click', function (ev) {
        var ev = ev || window.ev
        if (ev.target.nodeName.toLocaleLowerCase() == 'li') {
          ev.target.style.backgroundColor = 'black'
        }
      })
    }
    // e.target 事件触发元素

    /* 
      事件委托的优点
        1 绑定同类子元素时 不需要循环绑定事件
        2 动态添加了相同类型的子元素 如果是采用事件委托 新的元素也可以被相同的事件监听到 而采用传统的事件绑定 则新元素上并没有添加相同事件的监听
    */
    /* 
      事件冒泡的优点
        1 那些需要创建的以及驻留在内存中的事件处理器少了 并降低了崩溃的风险
        2 在DOM更新后无需重新绑定事件处理器了 如果页面是动态生成的 比如说通过Ajax 你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了
        3 可以大量节省内存占用 减少事件注册 比如在ul上代理所有li的click事件就非常棒
        4 可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

      缺点
        1 捕获比冒泡先执行
        2 鼠标的拖放事件 一般用捕获传递 因为这样不会使内部的元素触发处理事件 而且当鼠标down的时候且鼠标移动到document画布上时候 移动目标元素的移动事件依然可以有效
        IE
    */
  </script>
</body>
</html>